<template>
  <div class="article-list-body" :style="{ width: 1200 + 'px' }">
    <div class="article-panel">
      <div class="top-tab">
        <el-tag
          type="primary"
          v-for="(item, index) in tagsList"
          :key="index"
          @click="search(item)"
          >{{ item.tagName }}</el-tag
        >
      </div>
    </div>
    <div class="list" v-loading.fullscreen.lock="loading">
      <el-empty v-if="list.length <= 0" description="暂无数据" />
      <div
        class="rows"
        v-for="(item, index) in list"
        :key="index"
        @click="nav(item)"
      >
        <div class="left" :style="{ width: item.image ? '100%' : '100%' }">
          <div class="title">{{ item.title }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="bottom">
            <span class="user">{{ item.authorName }}</span>
            <span class="time">{{
              item.created ? moment(item.created).format('YYYY-MM-DD HH:mm:ss') : ""
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center" v-if="list.length > 0">
      <el-pagination
        size="large"
        @current-change="handlePageChange"
        :current-page="page"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        style="margin: 20px auto"
      ></el-pagination>
    </div>
  </div>
</template>
  
  <script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  defineProps,
  onMounted,
  watch,
} from "vue";
import { getTags, getTagsForList } from "@/api/article.js";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import moment from 'moment'
const store = useStore();
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const props = defineProps({
  searchText: {
    type: String,
    default: "",
  },
});
const tagsList = ref([]);
const list =ref([])
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const paramsId=ref("")
const getTagsList = async () => {
  loading.value = true;
  let res = await getTags();
  tagsList.value = res.data;
  if(tagsList.value && tagsList.value.length>0){
    paramsId.value = res.data[0].id
    getList()
  }
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};

onMounted(async () => {
  getTagsList();
 
});
const getFormatTime = (arr) => {
  arr = arr.map((item) => {
    return (item = item < 10 ? "0" + item : item);
  });
  return (
    arr[0] +
    "-" +
    arr[1] +
    "-" +
    arr[2] +
    " " +
    arr[3] +
    ":" +
    arr[4] +
    ":" +
    arr[5]
  );
};
const getList = async () => {
    loading.value = true;
  try {
    let res = await getTagsForList(paramsId.value,page.value);
    list.value = res.data.rows;
    total.value = res.data.total;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  } catch (e) {}
};
const search = (item) => {
    paramsId.value=item.id
  getList();
};
  const handlePageChange = (e) => {
    page.value = e;
    getList();
  };
  const nav=(item)=>{
    store.commit("joinArticleId",item.id)
    router.push(`/detail`)
  }
</script>
  
  <style lang="scss">
.article-list-body {
  .article-panel {
    background: #fff;
    .top-tab {
      display: flex;
      align-items: center;
      padding: 10px;
      font-size: 15px;
      border-bottom: 1px solid #ddd;
      gap: 8px;
      cursor: pointer;
    }
  }
}
.list {
  .rows {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 16px 24px;
    height: 195px;
    box-sizing: border-box;
    border-bottom: 1px solid #ededed;
    .title {
      font-size: 22px;
      cursor: pointer;
    }
    .title:hover {
      color: red;
    }
    .content {
      margin: 30px 0;
      color: #555666;
      overflow: hidden; //超出文本隐藏
      text-overflow: ellipsis; ///超出部分省略号显示
      display: -webkit-box; //弹性盒模型
      -webkit-box-orient: vertical; //上下垂直
      -webkit-line-clamp: 2; //自定义行数
    }
    .bottom {
      display: flex;
      justify-content: flex-end;
      color: #555666;
      gap: 20px;
    }
  }
}
</style>